@model OurWedding1.Models.GuestGroup
@using OurWedding1

@{
    ViewBag.Title = @Resources.GuestGroup;
}

@Html.Partial("_GuestsHeading")
<h2>@ViewBag.Title</h2>

<div style="display: block">
    <div id="leftColumn">
        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.GuestGroup</h3>
            <div class="margintop">
                @Html.Partial("_Details", Model)
            </div>
        </div>
        <div id="toolbar" class="ui-widget-header ui-corner-all">
            @Html.ActionLink(Resources.Back_To_List, "Index", null, new { @class = "backButtonLink" })
            @Html.ActionLink(Resources.Edit, "Edit", new { id = Model.GuestGroupId }, new { @class = "editButtonLink" })
        </div>

    </div>


    <div id="rightColumn">
        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.Guests</h3>

            <div class="margintop">
                @Html.ActionLink(Resources.Create_New, "CreateByGuestGroup", "Guests", new {id=Model.GuestGroupId}, new { @class = "createButtonLink" })
            </div>
            <div class="margintop">
                <div id="guests">
                    <div class="loaderAjax"></div>
                </div>
            </div>
        </div>

        <div class="ui-widget-content ui-corner-all uiframe">
            <h3 class="ui-widget-header ui-corner-all uiframeh3">@Resources.GuestInExpenses</h3>

            <div class="margintop">
                @Html.ActionLink(Resources.Create_New, "CreateByGuestGroup", "GuestInExpenses", new {id=Model.GuestGroupId}, new { @class = "createButtonLink" })
            </div>
            <div class="margintop">
                <div id="GuestInExpenses">
                    <div class="loaderAjax"></div>
                </div>
            </div>
        </div>
    </div>
</div>




<div id="modal"></div>
<div style="display: none">
    <div id="dialog-question">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>@Resources.DeleteQuestionAjax</p>
    </div>

    <div id="dialog-ajaxStart">
        @Resources.Ajax_ProcessingData
        <img src="~/Content/images/AjaxLoader.gif" width="16" height="16" />
    </div>

    <div id="dialog-Success">
        @Resources.Ajax_Success
    </div>

    <div id="dialog-Fail">
        @Resources.Ajax_Fail
    </div>

    <div id="dialog-confirm" title="@Resources.Delete">
    </div>
</div>

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryglob")
    @Scripts.Render("~/bundles/functions")
    <script type="text/javascript">

        $(function() {
            $(".editButtonLink").button({
                icons: {
                    primary: "ui-icon-pencil"
                }
            });
            $(".backButtonLink").button({
                icons: {
                    primary: "ui-icon-triangle-1-w"
                }
            });
            globalizationInit();
            initDialogs();
            loadGuests();
            loadDiscount();

        });

        function deleteDialogInit(divContainer, dataType) {
            $(divContainer + ' .deleteIconLink').click(function() {
                var url = this.href;
                $('#dialog-confirm').html($('#dialog-question').html());
                var dialog = $("#dialog-confirm").dialog({
                    resizable: false,
                    width: 300,
                    modal: true,
                    buttons: {
                        "@Resources.Delete": function() {
                            $('#dialog-confirm').html($('#dialog-ajaxStart').html());
                            dialog.dialog("option", "buttons", {});
                            $.ajax({
                                url: url,
                                type: 'POST',
                                cache: false,
                                success: function(result) {
                                    if (dataType == 0) {
                                        loadGuests();
                                    }
                                    if (dataType == 1) {
                                        loadDiscount();
                                    }
                                    dialog.dialog("close");
                                }
                            });

                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    }
                });
                return false;
            });
        }

        function loadGuests() {
            $('#guests').html('<div class="loaderAjax"></div>');
            $.ajax({
                url: "@Url.Action("IndexByGuestGroup", "Guests", new {id = Model.GuestGroupId})",
                type: 'GET',
                cache: false,
                success: function(result) {
                    $('#guests').html(result).show();
                    formatTable('#guests');
                    editDeleteIconLinkInit('#guests');
                    editDialogInit("#guests");
                    deleteDialogInit("#guests", 0);
                }
            });
        }

        function sliderInit() {
            var inputValue = Globalize.parseFloat($("#Discount").val(), 10, "pl-PL") * 100;
            $("#amountPr").html(inputValue + "%");
            $("#slider").slider({
                value: inputValue,
                min: 0,
                max: 100,
                step: 10,
                slide: function(event, ui) {
                    $("#Discount").val(Globalize.format(ui.value / 100, "n2", "pl-PL"));
                    $("#amountPr").html(ui.value + "%");
                }
            });


        }

        function loadDiscount() {
            $('#GuestInExpenses').html('<div class="loaderAjax"></div>');
            $.ajax({
                url: "@Url.Action("IndexByGuestGroup", "GuestInExpenses", new {id = Model.GuestGroupId})",
                type: 'GET',
                cache: false,
                success: function(result) {
                    $('#GuestInExpenses').html(result).show();
                    formatTable('#GuestInExpenses');
                    editDeleteIconLinkInit('#GuestInExpenses');
                    editDisIconLinkInit('#GuestInExpenses');
                    deleteDialogInit("#GuestInExpenses", 1);
                }
            });
        }

        function editDialogInit(divContainer) {

            $(divContainer + " .editIconLink").click(function() {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    //cache: false,
                    success: function(result) {
                        $('#modal').html(result).dialog('open');
                    }
                });
                return false;
            });
        }


        function editDisIconLinkInit(divContainer) {
            $(divContainer + " .editDIconLink").button({
                icons: {
                    primary: "ui-icon-pencil"
                },
                text: false
            }).click(function() {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    //cache: false,
                    //data: { id: "@Model.GuestGroupId" },
                    success: function(result) {
                        $('#modal').html(result).dialog('open');
                        sliderInit();
                    }
                });
                return false;
            });
        }

        function initDialogs() {
            $(".createButtonLink").button({
                icons: {
                    primary: "ui-icon-plus"
                }//,
                //text: false
            }).click(function() {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    cache: false,
                    success: function(result) {
                        $('#modal').html(result).dialog('open');
                        sliderInit();
                    }
                });
                return false;
            });

            $('.createGButtonLink').click(function() {
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    cache: false,
                    success: function(result) {
                        $('#modal').html(result).dialog('open');
                        sliderInit();
                    }
                });
                return false;
            });

            $('#modal').dialog({
                autoOpen: false,
                width: 300,
                modal: true
            });
        }

    </script>

    <script type="text/javascript">

        function handleModalSubmit(result) {
            if (result.value) {
                // JSON returned => validation succeeded => 
                // close the modal and update some property on the main form
                $('#modal').dialog('close');
                $('#otherProperty').val(result.value);
                loadGuests();
            } else {
                // validation failed => refresh the modal to display the errors
                $('#modal').html(result);
            }
        }

        function handleModalSubmit3(result) {
            if (result.value) {
                // JSON returned => validation succeeded => 
                // close the modal and update some property on the main form
                $('#modal').dialog('close');
                //$('#otherProperty').val(result.value);
                loadDiscount();
            } else {
                // validation failed => refresh the modal to display the errors
                $('#modal').html(result);
                sliderInit();
            }
        }
    </script>
}